<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Osjeti ZG Zrak</title>
<link rel="icon" 
      type="image/ico" 
      href="img/favico.ico">
<style type="text/css">@import "css/redmond.datepick.css";</style> 	  
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/util.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="src/tinybox.js"></script>
<script type="text/javascript" src="src/tooltip.js"></script>
<script type="text/javascript">
google.load("maps", "3",  {other_params:"sensor=false"});
google.load("jquery", "1.3.2");

function setMarkers(opt){

	//prije mijenjanja markera, izbrisi vec postojece
	if (markersArray) {
		for (var i=0; i < markersArray.length; i++) {
			markersArray[i].setMap(null);
		}
	}
	
	jQuery.get("src/skripta_markeri.php", {}, function(data) {
		jQuery(data).find("marker").each(function() {
		
			//ova funkcija stvara oznaku (marker) za svaki red iz xml-a
			
			var marker = jQuery(this);
			
			var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
			parseFloat(marker.attr("lng")));
			
			//dohvacanje atributa iz xml-a (mjerne vrijednosti, vrijeme, boja markera na karti)
			var co = marker.attr("CO")/1000;	
			var no2 = marker.attr("NO2");
			var	voc = marker.attr("VOC");		
			var	o3 = marker.attr("O3");
			var time = marker.attr("time");
			var color = marker.attr("icon");
			
			var cocol = marker.attr("COcol");	
			var no2col = marker.attr("NO2col");
			var	voccol = marker.attr("VOCcol");		
			var	o3col = marker.attr("O3col");
			
			var comax = 10;
			var no2max = 80;
			var o3max = 120;
			var vocmax = 50;
			
			var timesplit = time.split(" ");
			
			var coimg = '<img border=1px src="http://chart.apis.google.com/chart?chxl=1:|mg%2Fm%5E3+CO&chxp=1,0&chxr=0,0,'+comax+'&chxs=0,676767,11.5,0,_,676767&chxt=y,x&chs=70x150&cht=bvg&chco='+cocol+'&chds=0,'+comax+'&chd=t:'+co+'&chg=-1,20,0,0&chm=N,000000,0,-1,10" height="150" width="70">';
			
			var no2img = '<img border=1px src="http://chart.apis.google.com/chart?chxl=1:|%CE%BCg%2Fm%5E3+NO2&chxp=1,-9&chxr=0,0,'+no2max+'&chxs=0,676767,11.5,0,_,676767&chxt=y,x&chs=70x150&cht=bvg&chco='+no2col+'&chds=0,'+no2max+'&chd=t:'+no2+'&chg=-1,20,0,0&chm=N,000000,0,-1,10" height="150" width="70">';
			
			var o3img = '<img border=1px src="http://chart.apis.google.com/chart?chxl=1:|%CE%BCg%2Fm%5E3+O3&chxp=1,-9&chxr=0,0,'+o3max+'&chxs=0,676767,11.5,0,_,676767&chxt=y,x&chs=70x150&cht=bvg&chco='+o3col+'&chds=0,'+o3max+'&chd=t:'+o3+'&chg=-1,20,0,0&chm=N,000000,0,-1,10" height="150" width="70">';
			
			var vocimg = '<img border=1px src="http://chart.apis.google.com/chart?chxl=1:|%CE%BCg%2Fm%5E3+VOC&chxp=1,-9&chxr=0,0,'+vocmax+'&chxs=0,676767,11.5,0,_,676767&chxt=y,x&chs=70x150&cht=bvg&chco='+voccol+'&chds=0,'+vocmax+'&chd=t:'+voc+'&chg=-1,20,0,0&chm=N,000000,0,-1,10" height="150" width="70">';
			
			
			//postavljanje boje ikone na temelju atributa iz xml-a
			//generiranje sadrzaja InfoWindowa (Google Charts Api)
			if (opt=='Svi'){
				//document.getElementById("tekst").innerHTML='Svi';
				var iconname = 'img/'+color+'.png';
				var contenttext = '<div style="width:400px; height:210px">'+time+'<br/>'+coimg+no2img+o3img+vocimg+'</div>'; 
			} else 
			
			if (opt=='O3'){
				//document.getElementById("tekst").innerHTML='O3';
				var iconname = 'img/'+o3col+'.png';
				var contenttext = '<div style="width:80px; height:240px">'+timesplit[0]+'<br/>'+timesplit[1]+'<br/><br/>'+o3img+'</div>'; 
			} else
			
			if (opt=='CO'){
				//document.getElementById("tekst").innerHTML='CO';
				var iconname = 'img/'+cocol+'.png';		
				var contenttext = '<div style="width:80px; height:240px">'+timesplit[0]+'<br/>'+timesplit[1]+'<br/><br/>'+coimg+'</div>'; 
			} else
			
			if (opt=='NO2'){
				//document.getElementById("tekst").innerHTML='NO2';
				var iconname = 'img/'+no2col+'.png';		
				var contenttext = '<div style="width:80px; height:240px">'+timesplit[0]+'<br/>'+timesplit[1]+'<br/><br/>'+no2img+'</div>'; 
			} else
			
			if (opt=='VOC'){
				//document.getElementById("tekst").innerHTML='VOC';
				var iconname = 'img/'+voccol+'.png';		
				var contenttext = '<div style="width:80px; height:240px">'+timesplit[0]+'<br/>'+timesplit[1]+'<br/><br/>'+vocimg+'</div>'; 
			} 
			
			
			//postavljanje oznake na kartu
			var marker = new google.maps.Marker({position: latlng, map: map, icon:iconname});
			noMouseover = 1;
			
			//Otvaranje InfoWindowa na click
			markersArray.push(marker);
			google.maps.event.addListener(marker, "click", function() {
				clickedInfowindow.setContent(contenttext);
				clickedInfowindow.open(map, marker);
				noMouseover = 0;
			});
			google.maps.event.addListener(marker, "mouseover", function() {
				infowindow.setContent(contenttext);
				if (noMouseover) infowindow.open(map, marker);
			});
			google.maps.event.addListener(marker, "mouseout", function() {
				infowindow.close();
			});
			
			google.maps.event.addListener(clickedInfowindow, "closeclick", function() {
				noMouseover = 1;
			});
			
		});
	});
}

function setPolygons() {
	var highlightedPodrucjeKarta;
	
	jQuery.get("src/skripta_podrucja.php", {}, function(data) {
		jQuery(data).find("podrucje").each(function() {
			
			var podrucjeKarta;	
			var podrucje = jQuery(this);
			var podrucjeID = podrucje.attr("id");
			var podrucjeNaziv = podrucje.attr("naziv");
			var podrucjeCoords = [
				new google.maps.LatLng(parseFloat(podrucje.attr("lat1")),
									   parseFloat(podrucje.attr("lng1"))),
				new google.maps.LatLng(parseFloat(podrucje.attr("lat2")),
									   parseFloat(podrucje.attr("lng1"))),
				new google.maps.LatLng(parseFloat(podrucje.attr("lat2")),
									   parseFloat(podrucje.attr("lng2"))),
				new google.maps.LatLng(parseFloat(podrucje.attr("lat1")),
									   parseFloat(podrucje.attr("lng2")))
			];
			
			//postavi podrucja na kartu
			podrucjeKarta = new google.maps.Polygon({
				paths: podrucjeCoords,
				strokeColor: "#ADDCCD",
				strokeOpacity: 0.8,
				strokeWeight: 1,
				fillColor: "#ADDCCD",
				fillOpacity: 0.0
			});

			podrucjeKarta.setMap(map);
			
			google.maps.event.addListener(podrucjeKarta, "mouseover", function() {
				podrucjeKarta.setOptions({fillOpacity: 0.3});
				tooltip.show(podrucjeNaziv);
			});

			google.maps.event.addListener(podrucjeKarta, "mouseout", function() {
				podrucjeKarta.setOptions({fillOpacity: 0.0});
				tooltip.hide();
			});
			
			google.maps.event.addListener(podrucjeKarta, "click", function() {
				//ako je na karti odabrano podrucje, deselektiraj ga

				if (highlightedPodrucjeKarta) {
					highlightedPodrucjeKarta.setMap(null);
				}
				
				//postavi odabrano porducje na kartu (fillOpacity: 0.4)
				highlightedPodrucjeKarta = new google.maps.Polygon({
					paths: podrucjeCoords,
					strokeColor: "#ADDCCD",
					strokeOpacity: 0.8,
					strokeWeight: 1,
					fillColor: "#ADDCCD",
					fillOpacity: 0.4
				});
				
				highlightedPodrucjeKarta.setMap(map);
				
				google.maps.event.addListener(highlightedPodrucjeKarta, "mouseover", function() {
					tooltip.show(podrucjeNaziv);
				});
				
				google.maps.event.addListener(highlightedPodrucjeKarta, "mouseout", function() {
					tooltip.hide();
				});
				
				var selObj = document.getElementById("selPod");
				selObj.selectedIndex = podrucjeID;	//kliknuto podrucje postavi i u dropdown listi
				drawChart();	//nacrtaj graf statistike za odabrano podrucje
			});
		});
	});		
}

function initialize() {
	myLatlng = new google.maps.LatLng(45.819947, 15.977497);
	myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	infowindow = new google.maps.InfoWindow({disableAutoPan : true});
	clickedInfowindow = new google.maps.InfoWindow();
	markersArray = [];
	
	setMarkers('Svi');
	setPolygons();
}

google.setOnLoadCallback(initialize);
</script>
<script type="text/javascript">
//datepicker (odabir datuma)
$(function() {
	$('#popupDatepicker').datepick({
		 dateFormat: 'dd.mm.yyyy'
		,defaultDate: 0
		,maxDate: 0
		,selectDefaultDate: true
		,onSelect: function(){
			datum = $.datepick.formatDate('yyyy-mm-dd', $('#popupDatepicker').datepick('getDate')[0]);
			datumform = $.datepick.formatDate('dd.mm.yyyy.', $('#popupDatepicker').datepick('getDate')[0]);
			drawChart();
		}
	});
});
   
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

//crtanje grafa za statistiku
function drawChart() {
	var podid = document.getElementById("selPod").selectedIndex;	//dohvati id podrucja iz dropdown liste
	var chckbox = new Array();	//dohvati info o checkboxovima za prijenos php skripti
	chckbox.push(document.getElementById("COcheck").checked ? 1: 0);
	chckbox.push(document.getElementById("NO2check").checked ? 1: 0);
	chckbox.push(document.getElementById("O3check").checked ? 1: 0);
	chckbox.push(document.getElementById("VOCcheck").checked ? 1: 0);
	if (podid == 0) return;	//ako nije selektirano podrucje, nemoj crtati
	var jsonData = $.ajax({	//dohvaca json podatke iz baze, phpu prenosi argumente: id podrucja, selektirani datum, oznaceni checkboxovi
		url: "src/skripta_statistika.php?var1=" + podid + "&var2=" + datum + "&var3=" + chckbox,
		dataType:"json",
		async: false
	}).responseText;
	
	// Create our data table out of JSON data loaded from server.
	var data = new google.visualization.DataTable(jsonData);
	
	// Instantiate and draw our chart, passing in some options.
	var podime = document.getElementById("selPod").options[podid].text;
	var chart = new google.visualization.LineChart(document.getElementById('visualization'));
	chart.draw(data, {
		pointSize: 2,
		series: {0:{color: 'blue'}, 1:{color: 'red'}, 2:{color: 'orange'}, 3:{color: 'green'}}, 
		chartArea:{left:80,top:60,width:"85%",height:"70%"},
		legend: {position: "bottom"},
		vAxis: {maxValue: 120},
		title: podime + ", " + datumform});
	}
</script>
<script type="text/javascript" src="src/jquery.datepick.js"></script>
</head>

<body>
<div class="container">
  <div class="header"><a href="#"><img src="img/logonc.png" name="Insert_logo" height=102 id="Insert_logo" /></a> 
    <!-- end .header --></div>
	
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="javascript:TINY.box.show('Parametri.html',1,300,0,1)">Pregled parametara</a></li>
      <li><a href="http://narodne-novine.nn.hr/clanci/sluzbeni/289989.html">Propisi</a></li>
	  <li><a href="javascript:TINY.box.show('Obavijesti.html',1,300,0,1)">Obavijesti</a></li>
      <li><a href="javascript:TINY.box.show('Pomoc.html',1,300,0,1)">Pomoć</a></li>
	  <li><a href="javascript:TINY.box.show('projekt.html',1,300,0,1)">O projektu</a></li>
	  <li><a href="http://www.mzopu.hr">MZOPU</a></li>
	  <li><a href="javascript:TINY.box.show('Facebook.html',1,300,0,1)"><img src="img/facebook.png" height=15 width=15/>  Prijava</a></li>
    </ul>
    <!-- end .sidebar1 --></div>
	
  <div class="content">
    <div id="map_canvas" style="width:100%; height:600px"></div>
    <div>Prikaz statistike</div>
    <div id="visualization" style="height: 440px; width: 100%; background:#FFF"></div>
    <!-- end .content --></div>
	
  <div class="sidebar2">
    <ul class="nav">	  
      <li><a href="javascript:setMarkers('Svi')">Svi</a></li>
      <li><a href="javascript:setMarkers('CO')">CO</a></li>
      <li><a href="javascript:setMarkers('NO2')">NO2</a></li>
      <li><a href="javascript:setMarkers('O3')">O3</a></li>
      <li><a href="javascript:setMarkers('VOC')">VOC</a></li>
    </ul>
    <!-- end .sidebar2 --></div>
	
  <div class="sidebar3">
	Izaberi područje:</br>
	  <select name="podrucjeSelect" id="selPod" style="width: 80%" onchange="">
		  <option value="0">---</option>
		  <option value="1">Podsused</option>
		  <option value="2">Centar SZ</option>
		  <option value="3">Centar SI</option>
		  <option value="4">Centar JZ</option>
		  <option value="5">Centar JI</option>
		  <option value="6">Trešnjevka, Jarun</option>
		  <option value="7">Novi Zagreb</option>
	  </select></br></br>
	  
	Izaberi datum: </br>
	<input type="text" id="popupDatepicker" style="width: 80%"></br></br>
	<input type="checkbox" name="plin[]" value="CO" id="COcheck" checked/> CO<br/>
	<input type="checkbox" name="plin[]" value="NO2" id="NO2check" checked/> NO2<br/>
	<input type="checkbox" name="plin[]" value="O3" id="O3check" checked/> O3<br/>
	<input type="checkbox" name="plin[]" value="VOC" id="VOCcheck" checked/> VOC<br/><br/>
	<button type="button" style="width: 80%" onclick="drawChart()">Prikaži</button><br/><br/>
    <!-- end .sidebar3 --></div>
	
  <div class="footer" align="center">
    <a href="http://www.fer.unizg.hr/"><img src="img/bottomlogo.png" width="60" height="14" alt=""/></a><br/>
	2011</br>Kontakt-adresa: <a href="mailto:projekt-osjeti-zg-zrak@googlegroups.com"  class=bottombox>mail</a><br/>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>
